import { Tabbar } from "@taroify/core"
import { FriendsOutlined, HomeOutlined, Search } from "@taroify/icons"
import Taro from "@tarojs/taro";
import {useDispatchGlobalState, useGlobalStateSelector} from "@/hooks/global";

export default function CustomTabbar() {
  const dispatchGlobal = useDispatchGlobalState();
  const selectedTab = useGlobalStateSelector((state) => state.global.selectedTab);

  const handleTabChange = async (tab: string)=>{
    dispatchGlobal.changeTab(tab)
    await Taro.redirectTo({
      url: `/pages/tabs/${tab}/index`,
    });
  }

  return (
    <Tabbar defaultValue='dialogue' style={{ borderTop: '1px solid rgba(0, 0, 0, 0.1)'}} value={selectedTab}>
      <Tabbar.TabItem value='dialogue' onClick={() => handleTabChange('dialogue')} icon={<HomeOutlined />}>对话</Tabbar.TabItem>
      <Tabbar.TabItem value='discover' onClick={() => handleTabChange('discover')} icon={<Search />}>发现</Tabbar.TabItem>
      <Tabbar.TabItem value='profile' onClick={() => handleTabChange('profile')} icon={<FriendsOutlined />}>我的</Tabbar.TabItem>
    </Tabbar>
  )
}
